<template>
  <div>{{ state.count1 }}</div>
  <div>{{ state.nested.count2 }}</div>
  使用shallowReactive:
  <div>{{ state1.count1 }}</div>
  <div>{{ '我是不会变化的' + state1.nested.count2 }}</div>
  在reactiv中使用解构：
  <div>{{ state3.count1 }}</div>
  ref作为reactvie对象属性,会自动解包
  <div>{{ obj.name }}</div>
  如果 ref 作为 shallowReactive 对象的属性，那么不会自动解包
  <div>{{ obj1.name1 }}</div>
  非顶级的 Ref，不会自动解包
  <div>{{ books[0].value }}</div>
</template>

<script setup>
  const state = reactive({
    count1: 0,
    nested: {
      count2: 0
    }
  })
  console.log(state);
  setTimeout(() => {
    state.count1++
    state.nested.count2 += 2;
  }, 1000);

  /* 使用shallowReactive */
  const state1 = shallowReactive({
    count1: 0,
    nested: {
      count2: 0
    }
  })
  setTimeout(() => {
    state1.count1 += 3
  }, 1000);
  setTimeout(() => {
    state1.nested.count2 += 4
  }, 1000);


  let state3 = reactive({ count1: 0 })
  /* 这样子写会丢失之前的响应式 */
  state3 = reactive({ count1: 1 })
  /* 对于解构也会丢失响应式 */
  let { count1 } = state3
  //单纯是值的改变，不会触发响应式数据的关联
  count1++
  function handleStates(proxyState) {
    proxyState.count1++
  }
  //会触发响应式数据的关联改变，传入的是reactive对象本身
  handleStates(state3)


  /* ref解包细节 */
  /* ref作为reactvie对象属性,会自动解包 */
  const name = ref("Bill")
  const obj = reactive({
    name
  })
  console.log("会自动解包:", obj);  //这里会自动解包
  console.log(name.value);

  /* 如果 ref 作为 shallowReactive 对象的属性，那么不会自动解包 */
  const name1 = ref('lucky')
  const obj1 = shallowReactive({
    name1
  })
  console.log(obj1.name1.value); //这里不会自动解包
  console.log(name1.value);

  setTimeout(() => {
    obj1.name1 = 'John'
  }, 1000)

  setTimeout(() => {
    name1.value = 'Smith'
  }, 1000)

  /* 如果将 ref 数据作为 reactvie 数组或者集合的一个元素，此时是不会自动解包的 */
  const books = reactive([ref('Vue 3 Guide')])
  console.log(books[0].value);

  const map = reactive(new Map([['count', ref(0)]]))

  console.log(map.get('count').value);   //不会自动解包

  const map1 = reactive(new Map([['name', 'zqs']]))
  console.log(map1.get('name'));       //会自动解包



</script>

<style lang="scss" scoped></style>
